// 获取节点
let title = document.querySelector('.top .title')
let price = document.querySelector('.price span')
let num = document.querySelector('.add input')
let short = document.querySelector('#shortInfo')
// console.log(left)
// console.log(title, price, num)

async function add() {
  // 获取购物车里面的值
  let list = localStorage.getItem('cart')
  list = JSON.parse(list)
  console.log(list)
  //   list = JSON.parse(list)
  //    console.log(list[0])
  //  for(let arr in list){
  //      console.log(arr)
  //  }
  //   发送ajax.获取所有的数据
  let {
    data
  } = await axios.get('../js/shop.json')

  console.log(data)

  // 遍历所有数据，进行过滤
  let info = data.filter(ite => {
    console.log(ite.id);
    //   console.log(list["id"])
    //在数据里面过滤，传id到购物车里，如果有值就返回数值，为true,如果没有就是undefined，为false
    //   return list[ite.list["id"]]
    return list['id'] == ite.id
    // return ite[list["id"]]
  })


  function page() {
    let html = ''
    info.forEach(item => {
      //  html+=``
      console.log(item)
      html += `<div id="inner">
        <div class="left">
           <img src="${item.src}" alt=""> 
        </div>
        <div class="right">
          <div class="top">
            <h2 class="title">${item.name}</h2>
            <div class="shortDes">多功能控制面板 / 45 公里续航 / 6倍步行速度</div>
            <span
              title="企业名称小米通讯技术有限公司
企业执照注册号:91110108558521630L
企业地址北京市海淀区西二旗中路33号院6 号楼9层019号
企业电话:400-100-5678
营业期限:2010年08月25日 至 2040年08月24日
经营范围:开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">小米自营</span>
            <div class="price">
              <span>${item.price}</span>
              <span>4999元</span>
            </div>
          </div>
          <div class="giftware">
            <span>赠品</span>
            <span>满1件赠价值199元米家充气宝1S 黑色 赠完即止</span>
          </div>
          <div class="address">
            <i class="iconfont icon-weibiaoti-3"></i>
            <span>北京&nbsp;&nbsp;&nbsp;北京市&nbsp;&nbsp;&nbsp;海淀区&nbsp;&nbsp;&nbsp;清河街道</span>
            <a href="">修改</a>
            <span>有现货</span>
          </div>
          <div class="color">
            <span>选择颜色</span>
            <div class="black">陶瓷黑</div>
          </div>
          <div class="allMoney">
            <div class="top">
              <div class="top_left">${item.name}</div>
              <div class="top_right">
                <span>${item.price}</span>
                <span>4999元</span>
              </div>
            </div>
            <div class="bottom">总计:${item.price}</div>
          </div>
          <div class="add">
          
        
        
           <span onclick="shop(${item.id},'${item.name}','${item.price}','${item.src}')">加入购物车</span>
            <div class="like">
              <i class="iconfont icon-xihuan"></i>
              <span>喜欢</span>
            </div>
          </div>
          <div class="advantage">
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>小米自营</span>
            </li>
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>小米发货</span>
            </li>
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>7天无理由退货</span>
            </li>
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>运费说明</span>
            </li>
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>企业信息</span>
            </li>
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>售后服务政策</span>
            </li>
            <li>
              <i class="iconfont icon-kongxinduigou"></i>
              <span>7天价格保护</span>
            </li>
          </div>
        </div>
      </div>`


    })
    short.innerHTML = html
    // console.log(item.id)
    // console.log(info[0].id)
    // num=info[0].id




  }
  page()

}
add()
// 点击购物
async function shop(pid, zi, pr, pic) {
  // console.log(111)
  let num = pid
  let man = zi
  let prc = pr
  let pic1 = pic
  
  // console.log(num, man, prc, pic1)

  // 发送ajax
  let {
    data
  } = await axios.get('http://localhost:3000/shop?id=' + num)
  if(data[0]){
    // console.log(data[0].total)
    let numb=1
    numb=1+data[0].total
   
   axios.patch('http://localhost:3000/shop/'+num,{
     total:numb
   })}else {
    let res=await axios.post('http://localhost:3000/shop/',{
    total: 1,
    id:num,
    name:man,
    price:prc,
    src:pic1
  })
  }
  
    location.href="http://localhost/xiaomi/html/shoppingcart.html"
  
}